<template>
  <div>
        <el-button @click="add">添加{{title}}</el-button>
        <el-table
            :data='tableData'
            style="width: 100%"
        >
            <el-table-column
                prop="id"
                label="ID"
                width="80"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="标题"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="url"
                label="URL地址"
                show-overflow-tooltip
                width="400"
            >
            </el-table-column>
            <el-table-column
                prop="image"
                show-overflow-tooltip
                label="图片"
                width="300"
            >
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100"
            >
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 对话框 -->
        <el-dialog
            title='添加内容'
            :visible.sync="dialogVisible"
            width="30%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="URL地址">
                    <el-input v-model="form.url"></el-input>
                </el-form-item>
                <el-form-item label="图片地址">
                    <el-input v-model="form.image"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible=false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
  </div>
</template>

<script>
export default {
    name:'ShowContent',
    props:['id','title'],
    data(){
        return{
            tableData:[],
            dialogVisible:false,
            form:{
                name:'',
                url:'',
                image:''
            },
        }
    },
    watch:{
        id(n){
            if(n){
                this.tableData=[]
                this.getdata(n)
            }
        }
    },
    methods:{
        //获取数据
        getdata(n){
            this.$api.getSelectTbContentAllByCategoryId({
                    id:n
                }).then(data=>{
                    console.log(data)
                    if(data.status==200){
                        this.tableData=data.data
                    }
                })
        },
        //确认提交
        onSubmit(){
            this.$api.getInsertTbContent({
                pid:this.id,
                ...this.form
            }).then(data=>{
                console.log(data)
                if(data.status==200){
                        this.$message({
                            type:'success',
                            message:'添加成功'
                        })
                        this.dialogVisible=false;
                        this.getdata(this.id)
                    }else{
                        this.$message({
                            type:'danger',
                            message:'添加失败'
                        })
                    }
            })
        },
        //删除
        handleClick(row){
            console.log(row)
            this.$confirm('是否删除？删除后不可恢复！！！')
            .then(() => {
                this.$api.getDeleteContentByIds({
                    id:row.id
                }).then(data=>{
                    if(data.status==200){
                        this.$message({
                            type:'success',
                            message:'删除成功'
                        })
                        this.getdata(this.id)
                        this.dialogVisible=false;
                    }else{
                        this.$message({
                            type:'danger',
                            message:'删除失败'
                        })
                    }
                })
            })
            .catch(() => {
                this.$message({
                    type:'info',
                    message:'已取消删除'
                })
            });
            
        },
        //添加
        add(){
            this.dialogVisible=true;
        }
    }
}
</script>

<style>

</style>